<template>
  <div class="max-w-[600px] mx-auto pb-[100px] bg-gray-100 min-h-screen">
    <!-- 顶部标题栏 -->
    <div class="sticky top-0 z-10 flex items-center py-3.75 px-5 bg-white shadow-sm">
      <button
          class="flex items-center gap-1.25 bg-transparent border-none p-2 rounded-full transition-all hover:bg-gray-100 active:scale-95"
          @click="router.back()"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        <span>返回</span>
      </button>
      <h2 class="flex-1 text-center m-0 text-lg font-semibold text-gray-800">订单确认</h2>
    </div>

    <!-- 菜品列表 -->
    <div class="bg-white rounded-lg p-3.75 mb-3.75">
      <div
          v-for="(item, index) in orderItems"
          :key="index"
          class="flex items-center py-2.5 border-b border-gray-200 last:border-0"
      >
        <img
            :src="item.image"
            :alt="item.name"
            class="w-[60px] h-[60px] object-cover rounded mr-3.75"
        >
        <div class="flex-1">
          <h3 class="m-0 mb-1.25 text-base">{{ item.name }}</h3>
          <p class="m-0 text-sm text-gray-600">¥{{ item.price }}</p>
        </div>
        <div class="flex flex-col items-end">
          <span class="text-sm text-gray-600">×{{ item.count }}</span>
          <span class="font-bold text-red-500">¥{{ (item.price * item.count).toFixed(2) }}</span>
        </div>
      </div>
    </div>

    <!-- 订单汇总 -->
    <div class="bg-white rounded-lg p-3.75 mb-3.75">
      <div class="flex justify-between mb-2.5">
        <span>商品总数</span>
        <span>{{ totalItems }}件</span>
      </div>
      <div class="flex justify-between text-lg font-bold">
        <span>合计</span>
        <span class="text-red-500">¥{{ totalAmount }}</span>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="bg-white rounded-lg p-3.75 mb-3.75">
      <h3 class="m-0 mb-3.75">选择支付方式</h3>
      <div class="flex gap-3.75">
        <div
            class="flex-1 border rounded-lg p-3.75 flex flex-col items-center cursor-pointer transition-all"
            :class="selectedMethod === 'alipay' ? 'border-blue-500 bg-blue-50' : 'border-gray-300'"
            @click="selectedMethod = 'alipay'"
        >
          <img
              src="@/assets/images/alipay.png"
              alt="支付宝"
              class="w-10 h-10 object-contain mb-2"
          >
          <span class="text-sm">支付宝</span>
        </div>
        <div
            class="flex-1 border rounded-lg p-3.75 flex flex-col items-center cursor-pointer transition-all"
            :class="selectedMethod === 'wechat' ? 'border-blue-500 bg-blue-50' : 'border-gray-300'"
            @click="selectedMethod = 'wechat'"
        >
          <img
              src="@/assets/images/wechatpay.png"
              alt="微信支付"
              class="w-10 h-10 object-contain mb-2"
          >
          <span class="text-sm">微信支付</span>
        </div>
      </div>
    </div>

    <!-- 支付按钮 -->
    <button
        class="fixed bottom-5 left-5 right-5 bg-blue-500 text-white border-none rounded-full py-3 text-base font-bold cursor-pointer max-w-[560px] mx-auto disabled:bg-gray-300 disabled:cursor-not-allowed"
        @click="handlePayment"
        :disabled="!selectedMethod"
    >
      确认支付 ¥{{ totalAmount }}
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { saveTempOrder } from '@/utils/storage'

const router = useRouter()
const route = useRoute()
const selectedMethod = ref(null)

// 获取订单数据
const orderItems = ref(JSON.parse(route.query.orderItems || '[]'))
const totalAmount = ref(parseFloat(route.query.totalAmount || 0))
const totalItems = computed(() => orderItems.value.reduce((sum, item) => sum + item.count, 0))

const handlePayment = () => {
  if (!selectedMethod.value) return

  // 生成临时订单
  const newOrder = {
    id: Date.now(),
    shop: {
      name: route.query.shopName || '未知商家',
      image: route.query.shopImage || require('@/assets/default-restaurant.jpg')
    },
    dishes: orderItems.value,
    total: totalAmount.value,
    timestamp: new Date().toISOString(),
    status: "待支付"
  }
  saveTempOrder(newOrder)

  // 跳转到对应支付页
  router.push({
    name: selectedMethod.value === 'alipay' ? 'alipay' : 'wechatpay',
    query: {
      amount: totalAmount.value,
      orderId: newOrder.id
    }
  })
}
</script>